<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
	.button{
	 background-color:red;
width:100px;
height:50px;
font-size:20px;
color:white;
font-weight:bold;
border-radius:10px;

			}
</style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <title>注册</title>
    <link rel="stylesheet" href="style2/index.css">
</head>
<body class="bg-register">
    <div class="register-contain">
        <div class="register-header">
            <a href="login1.jsp"> < <span>登录</span> </a>
        </div>
        <form action="register" method="post">
        <div class="form-group">
            <div class="form-item">
                <label for="phone">
                    <img src="image2/phone.png" alt="">
                </label>
                <input type="text"  id="phoneNumber2"  name="phoneNumber" placeholder="请输入手机号码">
            </div>
            <div class="form-item">
                <label for="code">
                    <img src="image2/code.png" alt="">
                </label>
                <input type="text"  id="carNumber" name="carNumber" placeholder="请输入车牌号码">
            </div>
            <div class="form-item">
                <label for="code">
                    <img src="image2/code.png" alt="">
                </label>
                <input type="text" id="userName" name="userName" placeholder="请输入姓名">
            </div>
            <div class="form-item">
                <label for="code">
                    <img src="image2/code.png" alt="">
                </label>
                 <input type="text"  id="carModel" name="carModel" placeholder="请输入车辆型号">
            </div>
            <div class="form-item">
                <label for="code">
                    <img src="image2/code.png" alt="">
                </label>
               <input type="text"  id="carColor" name="carColor" placeholder="请输入车辆颜色">
            </div>
            <div class="form-item">
                <label for="password">
                    <img src="image2/key.png" alt="">
                </label>
                <input type="password"  id="password2"   name="password" placeholder="请输入密码">
            </div>
        </div>
        <div class="button-group">
            <input type="button" id="zhuce" class="button" value="注册"/>
        </div>
        </form>
        <div class="authorization">
            <input type="checkbox">
            <span class="ml-5">注册使用即表示同意</span>
            <span class="protocol">用户协议及版权声明</span>
        </div>
        <div class="go-login">
            <a href="login1.jsp">已经有账号？去登录</a>
        </div>
        <div class="tourism">
            <img src="image2/tourism.png" alt="">
            <img src="image2/tourism2.png" alt="">
            <img src="image2/tourism3.png" alt="">
        </div>
    </div>
<script src="js2/index.js"></script>
<!-- 提示框 -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
			$("#zhuce").click(function(){
				var phone = "^[1][3,4,5,7,8][0-9]{9}$";//手机号码的正则
				var pass="^(\\w){6,20}$"//密码正则
				var re = new RegExp(phone);//创建手机号码正则对象
				var re1 = new RegExp(pass);//创建密码正则对象
				var phoneNumber = $("#phoneNumber2").val();    //用户名
		    	var password = $("#password2").val();      //密码
		    	var carNumber = $("#carNumber").val();      //车牌号
		    	var userName = $("#userName").val();      //用户姓名
		    	var carModel = $("#carModel").val();      //车辆类型
		    	var carColor = $("#carColor").val();      //车颜色
		    	if(phoneNumber==""||password==""||carNumber==""||userName==""||carModel==""||carColor==""){
		    		alert("请填写完整信息")
		    		window.location = "login1.jsp";
		    	}else if(!(re.test(phoneNumber))){
		    		alert("手机格式不对")
		    		window.location = "login1.jsp"
		    	}else if(!(re1.test(password))){
		    		alert("密码格式不对请重新注册")
		    		window.location = "login1.jsp"
		    	}else{
			    $.ajax({  
	                type: "post",  
	                async:true,
	                data:{phoneNumber:phoneNumber,password:password,
	                	carNumber:carNumber,userName:userName,carModel:carModel,
	                	carColor:carColor},
	                dataType:"text",
	                url : "register",
	                
	                success: function (data) {
	                	if(data=="注册失败"){
	                		alert("车牌号或者手机号已被注册请重新注册");
	                		window.location = "login1.jsp"
	                	}else if(data=="注册成功"){
	                		alert("注册成功,返回登录界面");
	                		window.location = "login1.jsp"
	                	}
	              	}   
	           	});
		    	}
			})
	</script>	
</body>
 
</html>
